<template>
  <div>
    <el-form
      ref="searchKey"
      :inline="true"
      :model="searchKey"
      :show-message="false"
      :inline-message="true"
      label-position="left"
      label-width="60px"
    >
      <el-form-item label="姓名" prop="employeeName" label-width="50px">
        <el-input
          v-model="searchKey.employeeName"
          size="small"
          placeholder="请输入姓名"
          style="width: 120px;"
        />
      </el-form-item>
      <el-form-item label="状态" prop="employeeStatus" label-width="50px">
        <el-select v-model="searchKey.employeeStatus" size="small" placeholder="请选择" style="width: 100px;">
          <el-option label="请选择" value="" />
          <el-option label="在职" :value="0" />
          <el-option label="待离职" :value="1" />
          <el-option label="离职" :value="20" />
        </el-select>
      </el-form-item>
      <el-form-item label="发放月份" prop="salaryDate" label-width="80px">
        <el-date-picker
          v-model="searchKey.salaryDate"
          size="small"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月"
        />
      </el-form-item>
      <el-form-item class="treeSelect" label="部门" prop="deptIds" label-width="50px">
        <tree-select
          v-model="searchKey.deptIds"
          :multiple="true"
          :flat="true"
          :default-expand-level="1"
          :options="departmentAllListData"
          :normalizer="treeSelectProps"
          placeholder="选择部门"
          style="width: 350px;"
        />
      </el-form-item>
      <el-form-item label="职务" prop="postIds" label-width="50px">
        <el-select
          v-model="searchKey.postIds"
          size="small"
          placeholder="请选择职务"
          multiple
          collapse-tags
          style="width: 170px"
        >
          <el-option label="请选择职务" value="" />
          <el-option
            v-for="(item, index) in jobAllListData"
            :key="`${item.postName}${index}`"
            :label="item.postName"
            :value="item.postId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职级" prop="postIds" label-width="50px">
        <el-select
          v-model="searchKey.postLevelList"
          size="small"
          multiple
          placeholder="请选择职级"
          collapse-tags
          clearable
          style="width: 200px"
        >
          <el-option label="请选择职级" value="" />
          <el-option
            v-for="(item, index) in employeePostLevelListData"
            :key="`${item.postName}${index}`"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="companys" label-width="70px">
        <el-select
          v-model="searchKey.companys"
          size="small"
          multiple
          placeholder="请选择公司名称"
          collapse-tags
          clearable
          style="width: 300px"
        >
          <el-option label="请选择公司名称" value="" />
          <el-option
            v-for="(item, index) in employeeCompanyListData"
            :key="`${item.postName}${index}`"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="板块" prop="plateBlocks" label-width="50px">
        <el-select
          v-model="searchKey.plateBlocks"
          size="small"
          multiple
          placeholder="请选择板块"
          collapse-tags
          clearable
          style="width: 200px"
        >
          <el-option label="请选择板块" value="" />
          <el-option
            v-for="(item, index) in listPlateBlockData"
            :key="`${item}${index}`"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商业险" prop="payBusinessInsurance" label-width="60px">
        <el-select v-model="searchKey.payBusinessInsurance" size="small" placeholder="请选择" style="width: 100px;">
          <el-option label="请选择" value="" />
          <el-option label="未缴纳" value="0" />
          <el-option label="缴纳" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="发放类型" prop="salaryType" label-width="80px">
        <el-select v-model="searchKey.salaryType" size="small" placeholder="请选择发放类型">
          <el-option label="请选择" value="" />
          <el-option label="工资发放" :value="1" />
          <el-option label="工资补发" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="工资范围" prop="salaryRange" label-width="70px">
        <el-select v-model="searchKey.salaryRange" size="small" clearable placeholder="请选择区间" style="width: 130px;">
          <el-option
            v-for="item in baseSalaryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期" prop="entrySelectedDate" label-width="70px">
        <el-date-picker
          v-model="searchKey.entrySelectedDate"
          size="small"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          style="width: 250px;"
        />
      </el-form-item>
      <el-form-item label="离职日期" prop="dimissionSelectedDate" label-width="70px">
        <el-date-picker
          v-model="searchKey.dimissionSelectedDate"
          size="small"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          style="width: 250px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        <el-dropdown style="margin-left:10px" trigger="click">
          <el-button
            v-hasPermi="['hr:salaryMonth:export']"
            split-button
            type="warning"
            size="small"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon-download" />  导出
            </span>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleExport">业务外包板块</el-dropdown-item>
            <el-dropdown-item @click.native="handleExport2">起航股份</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-button
          v-hasPermi="['hr:salaryMonth:export']"
          size="small"
          type="warning"
          icon="el-icon-download"
          @click="handleExport"
        >导出外包公司工资模板
        </el-button>
        <el-button
          v-hasPermi="['hr:salaryMonth:export']"
          size="small"
          type="warning"
          icon="el-icon-download"
          @click="handleExport2"
        >导出股份公司工资模板
        </el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'SalarylistSearch',
  components: {
    TreeSelect
  },
  mixins: [],
  props: {
    employeePostLevelListData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    employeeCompanyListData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    listPlateBlockData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    initParams: { // 初始参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    departmentAllListData: {// 搜索参数
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    jobAllListData: { // 下拉的职位列表
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      baseSalaryOptions: [{
        value: '0-5000',
        label: '< 5k'
      }, {
        value: '5000-8000',
        label: '5k - 8k'
      }, {
        value: '8000-12000',
        label: '8k - 12k'
      }, {
        value: '12000-15000',
        label: '12k - 15k'
      }, {
        value: '15000-1000000',
        label: '> 15k'
      }],
      isShowFilter: false, // 是否显示搜索
      searchKey: {},
      treeSelectProps(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children
          // isDefaultExpanded: true
        }
      }
    }
  },
  computed: {},
  methods: {
    resetSearchData() { // 重置表单
      this.searchKey = {
        ...JSON.parse(JSON.stringify(this.initParams)),
        ...{
          pageSize: this.searchKey.pageSize
        }
      }
    },
    handleFilter: debounce(function() { // 查询，防抖
      this.searchKey.pageNum = 1
      this.$emit('on-init', this.searchKey)
    }, 300),
    handleReset: debounce(function() { // 重置查询，防抖
      this.resetSearchData()
      this.$emit('on-init', this.searchKey)
    }, 300),
    handleExport: debounce(function() { // 导出，防抖
      this.$emit('on-export', this.searchKey)
    }, 300),
    handleExport2: debounce(function() { // 导出，防抖
      this.$emit('on-export2', this.searchKey)
    }, 300),
    async initData() { // 初始化数据
    }
  },
  watch: {
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .treeSelect {
    & /deep/ .vue-treeselect__multi-value {
      line-height: 20px;
    }
  }
</style>
